<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>全部角色</span>
      <div>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container">
    
     
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="rolearr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" align="center" label="角色号"></el-table-column>
          <el-table-column prop="rolename" align="center" label="角色名"></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="updata(scope.row.id)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <br>
      <br>
       <!-- 修改权限 -->
      <el-dialog v-dialogDrag title="修改权限" :visible.sync="eqma" width="45%">
        <el-tree
          :data="permissions"
          default-expand-all
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="[1,2,8,21,30,36]"
          :default-checked-keys="idLists"
          :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="eqma = false">取消</el-button>
          <el-button @click="getCheckedKeys">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { roleslist, getOwnedMenu, updateRoleMenu,getAllMenu } from "@/api/api";
export default {
  name: "item-one",
  data: function() {
    return {
      name:"",
      multipleSelection: [],
      rolearr: [],
      eqma: false,
      erinfo:{},
      permissions: [],
      idList:[],
      idLists:[],
      roleId:"",
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      Serviceinfo:''
    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);
    this.Serviceinfo =  JSON.parse(sessionStorage.getItem('oemId'))
    // console.log(this.$store.state.changableNum);
    // console.log(this.$store.state.showFooter);
    // console.log(this.$store.state.logininfo);

    this.roleslist();
  },
  methods: {
      
     getCheckedKeys() {
         let list = this.$refs.tree.getCheckedKeys()
         list = list.concat(this.$refs.tree.getHalfCheckedKeys())
         let lists =  list.join(',')
        this.updateRoleMenu(lists)
      },
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now()
        }
      })
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
     // 角色列表
    roleslist() {
      roleslist({
          oemId: this.Serviceinfo.oemId
      }).then(res => {
        // console.log(res);
        if(res.code == 405){
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        }else{
          this.rolearr = res.data.rows
        }
      });
    },
    // 获取修改列表
    updata(val){
      this.eqma = true
      this.roleId = val
      getOwnedMenu({
        roleId:val
      }).then(res => {
        console.log(res);
        if(res.code == 405){
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        }else{
          this.permissions = res.data.allMenu
          this.idList = res.data.idList
          let array1 = []
          for(var i= 0;i<this.permissions.length;i++){
            array1.push(this.permissions[i].id)
          }
          //临时数组存放
          let tempArray1 = [];//临时数组1
          let tempArray2 = [];//临时数组2
          for(var i=0;i<array1.length;i++){
              tempArray1[array1[i]]=true;//将数array2 中的元素值作为tempArray1 中的键，值为true；
          }
          for(var i=0;i<this.idList.length;i++){
              if(!tempArray1[this.idList[i]]){
                  tempArray2.push(this.idList[i]);//过滤array1 中与array2 相同的元素；
              }
          }
          // console.log(tempArray2)
          this.idLists = tempArray2
        }
      });
    },
    // 修改角色权限
    updateRoleMenu(idList){
      updateRoleMenu({
        roleId:this.roleId,
        idList:idList,
        oemId: this.Serviceinfo.oemId
      }).then(res => {
        console.log(res);
        if(res.code == 405){
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        }else if(res.code == 200){
           this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.eqma = false
          this.getAllMenu()
        }else{
          this.$message.error(res.message);
        }
      });
    },
     // 更新菜单
    getAllMenu(){
       let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
      getAllMenu({
        roleId:userinfo.rolesId
      }).then(res => {
        sessionStorage.setItem('menuList',JSON.stringify(res.data))
      });
    },
  }
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}

</style>